<%-- 
    Document   : dangky
    Created on : Dec 2, 2011, 8:37:51 AM
    Author     : BlueZky
--%>

<%@page import="net.tanesha.recaptcha.ReCaptchaFactory"%>
<%@page import="net.tanesha.recaptcha.ReCaptcha"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Đăng ký</title>
        <link rel="stylesheet" type="text/css" href="styles/simple.css"/>
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.js"></script>
        <link rel="stylesheet" type="text/css" href="styles/jquery-ui-1.8.16.custom.css"/>
        <link rel="stylesheet" type="text/css" href="styles/screen.css"/>
    </head>

    <body>
        <script type="text/javascript">
            $(document).ready(function(){
                // Datepicker
                               
                $('#ngaysinh').datepicker({
                    inline: true
                });
                $('#ngaysinh').datepicker("option","dateFormat",'dd/mm/yy');
                $('#ngaysinh').datepicker("option","changeYear",'true');
                $('#ngaysinh').datepicker("option","changeYear",'true');
                $('#ngaysinh').datepicker("option","changeMonth",'true');
                $('#ngaysinh').datepicker("option","monthStyle",'digit');
                $('#ngaysinh').datepicker("option","yearRange",'1900');
                $('#dangky').validate({
                    rules:{
                        tendangnhap:"required",
                        email:{
                            required:true,
                            email:true
                        },
                        reEmail:{
                            equalTo:'#email'
                        },
                        matkhau:{
                            required:true,
                            minlength:6
                        },
                        reMatkhau:{
                            equalTo:'#matkhau'
                        },
                        hoten:"required",
                        ngaysinh:{
                            required:true,
                            date:true
                        },
                        diachi:"required",
                        sodienthoai:{
                            required:true,
                            digits:true
                        }
                    },
                    messages:{
                        tendangnhap:"Chọn tên đăng nhập.",
                        email:{
                            required:"Nhập địa chỉ Email của bạn.",
                            email:"Địa chỉ email không hợp lệ."
                        },
                        reEmail:{
                            equalTo:"Địa chỉ email không trùng."
                        },
                        matkhau:{
                            required:"Chưa nhập mật khẩu.",
                            minlength:"Mật khẩu phải dài hơn 6 ký tự"
                        },
                        reMatkhau:{
                            equalTo:"Mật khẩu không trùng. Vui lòng nhập lại."
                        },
                        hoten:"Chưa nhập họ tên",
                        ngaysinh:{
                            required:"Chưa nhập ngày sinh",
                            date:"Ngày sinh không hợp lệ"
                        },
                        diachi:"Chưa nhập địa chỉ",
                        sodienthoai:{
                            required:"Chưa nhập số điện thoại",
                            digits:"Số điện thoại không đúng"
                        }
                    }
                        
                });
            });
        </script>
        <div class="sub-body" style="width: 650px;">
            <div class ="title"> Đăng ký tài khoản mới
                <div class="home"><a href="trangchu.htm">
                        <img src="images/home.png" align="middle" alt="home"/>Trang chủ</a>
                </div>
            </div>
            <c:if test="${message ne null}">
                <div class="rerror">${message}</div>
            </c:if>

            <form:form id="dangky" method="post" commandName="nguoidung">
                <input type="hidden" name="a" value="li"/>
                <div class="table">
                    <div class="tr">
                        <div class="cell-left">Tên đăng nhập</div>
                        <div class="cell-right input">
                            <form:input path="tendangnhap" id="tendangnhap" type="text" name="userName" value=""/>(*)</div>

                    </div>
                    <div class="tr">
                        <div class="cell-left">Email</div>
                        <div class="cell-right  input">
                            <form:input path="email" id="email"  type="text" name="email" value=""/>(*)</div>

                    </div>
                    <div class="tr">
                        <div class="cell-left">Nhập lại Email</div>
                        <div class="cell-right input">
                            <input id="reEmail" type="text" name="reEmail" value=""/>(*)</div>

                    </div>
                    <div class="tr">
                        <div class="cell-left">Mật khẩu</div>
                        <div class="cell-right input">
                            <form:input path="matkhau" id="matkhau" type="password" name="password" value=""/>(*)
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Nhập lại mật khẩu</div>
                        <div class="cell-right input"><input class="input" id="reMatkhau" type="password" name="reMatkhau" value=""/>(*)
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Họ tên</div>
                        <div class="cell-right input">
                            <form:input path="hoten" id="hoten" class="input" type="text" name="hoten" value=""/>(*)
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Giới tính</div>
                        <div class="cell-right" style="min-height: 30px; padding: 8px 0 0 0;">
                            <input  type="radio" name="gender" value="Nam"/>Nam 
                            <input  type="radio" name="gender" value="Nữ"/>Nữ
                            <input  type="radio" name="gender" value="Khác"/> Giới tính khác
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Ngày sinh</div>
                        <div class="cell-right input">
                            <form:input path="ngaysinh" class="input" id="ngaysinh" type="text" name="ngaysinh" value=""/>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Địa chỉ</div>
                        <div class="cell-right input">
                            <form:input path="diachi" id="diachi" class="input" type="text" name="diachi" value=""/>(*)
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Số điện thoại</div>
                        <div class="cell-right input">
                            <form:input path="sodienthoai" id="sodienthoai" class="input" type="text" name="sodienthoai" value=""/>(*)
                        </div>
                    </div>
                    <div class="tr">
                        <div class="cell-left">Mã số tài khoản Paypal</div>
                        <div class="cell-right input">
                            <form:input path="taikhoanpaypal" id="taikhoanpaypal" class="input" type="text" name="paypalID" value=""/>
                        </div>
                    </div>
                    <div class =" tr" style="padding-left: 120px;">
                        Nhập mã xác thực

                        <%
                            ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LcinsgSAAAAAK7vyXsp5J2K4rPFDNYJxBo2C3mW", "6LcinsgSAAAAANc_pVTmCEL8lxeHmAucwl7DvMUh", false);
                            out.print(c.createRecaptchaHtml(null, null));
                        %>
                    </div>
                    <div class="tr">
                        <div></div>
                        <div class="cell-right button" > <input type="submit" name="register" value="Đăng ký"/></div>
                    </div>
                    <div class="tr">
                        <div class="cell-left" style="padding-top: 20px;"></div>
                        <div class="cell-right" style="padding-top: 20px;"><b>
                                Đã có tài khoản? <a href ="dangnhap.htm">  Đăng nhập</a>
                            </b></div>
                    </div>
                </div>
            </form:form>
        </div>
    </body>
</html>